<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hello-vue</title>
        <!-- 使用CDN的ElementPlus样式，也可以把文件下载到本地再引入 -->
        <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
		<style>
			/* 取消浏览器的默认样式 */
			* {
				padding: 0px;
				margin: 0px;
				list-style: none;
				box-sizing: border-box;
			}	
		</style>
	</head>
	<body>
		<main id="app">
			<div class="banner-box">
				<p>name:{{name}}</p>
				<p>age:{{age}}</p>
			</div>
            <el-button type="primary" @click="submitForm">确认</el-button>
		</main>
	</body>
    <!-- 使用CDN的Vue3，也可以把文件下载到本地再引入 -->
	<script src="https://unpkg.com/vue@3"></script>
    <!-- 使用CDN的ElementPlus库，也可以把文件下载到本地再引入，记得先引入Vue3 -->
    <script src="https://unpkg.com/element-plus"></script>
	<script>
		// 从Vue中引入需要使用的方法（ES6的解构赋值）
		const { createApp, ref } = Vue;
        // 其它的也通过该方式
        // const {createApp,ref,reactive,computed,watch...}
		
		// 定义创建Vue的选项对象
		const App = {
			// vue3 只需要提供一个setup函数即可
			setup() {
				let name = ref("奉先");
				let age = ref(36);

                function submitForm() {
                    console.log("点击确认")
                }
				
				// setup()函数，必须return一个对象，对象中的属性可以在模板中进行使用
				return {
					name,
					age,
                    submitForm
				}
			}
		}
		
		// 利用选项对象，和创建方法，创建Vue对象
		const app = createApp(App);

        // 使用ElementPlus
        app.use(ElementPlus);

		// 挂载节点
		app.mount("#app");
		
	</script>
</html>